<template>
  <div>
    <div class="numberbox-class numberbox">
      <hover>
        <div
          class="numbox-icon numberbox-btn numberbox-btn-reduce icon-reduce"
          :class="disabled || min >= modelValue ? 'disabled' : ''"
          @click.stop="reduce"
          :style="[
            `font-size:${iconsize}rpx`,
            `height:${Number(height) + 10}rpx`,
            `width:${Number(height) + 10}rpx`,
            `line-height:${Number(height) + 10}rpx`,
          ]"
        ></div>
      </hover>
      <input
        type="number"
        :value="modelValue"
        :disabled="disabled || inputdisabled"
        @blur.stop="blur"
        class="num-input"
        :style="[
          `color:${color}`,
          `font-size:${iconsize}rpx`,
          `background:${bgcolor}`,
          `height:${height}rpx`,
          `line-height:${height}rpx`,
          `width:${width}rpx`,
        ]"
      />

      <hover>
        <div
          class="numbox-icon numberbox-btn icon-plus"
          :class="disabled || modelValue >= max ? 'disabled' : ''"
          @click.stop="plus"
          :style="[
            `font-size:${iconsize}rpx`,
            `height:${Number(height) + 10}rpx`,
            `width:${Number(height) + 10}rpx`,
            `line-height:${Number(height) + 10}rpx`,
            `background:${diyTheme?.host_bg}`,
          ]"
        ></div>
      </hover>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "numberbox",
};
</script>
<script lang="ts" setup>
import { ref, onMounted, nextTick, getCurrentInstance } from "vue";
import { useConfig } from "@/store";
import { diyThemeDataType } from "@/types";
const configStore = useConfig();

const props = withDefaults(
  defineProps<{
    modelValue?: string | number;
    tips?: string;
    min?: number;
    max?: number;
    step?: number | any;
    disabled?: boolean;
    inputdisabled?: boolean;
    iconsize?: number | string;
    iconcolor?: string;
    height?: string | number;
    width?: string | number;
    bgcolor?: string;
    color?: string;
    index?: string | number;
    custom?: number;
    params?: any;
  }>(),
  {
    tips: "",
    modelValue: "",
    min: 0,
    max: 1000,
    step: 1,
    disabled: false,
    inputdisabled: false,
    iconsize: 20,
    iconcolor: "#333",
    height: 36,
    width: 60,
    bgcolor: "#f2f2f2",
    color: "#333",
    index: 0,
    custom: 0,
    params: {},
  }
);

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["update:modelValue", "change"]);

const diyTheme = ref<diyThemeDataType>();

const inputValue = ref<string | number>(props.modelValue);

const getScale = () => {
  let scale = 1;
  //浮点型
  if (props.step != parseInt(props.step)) {
    scale = Math.pow(10, (props.step + "").split(".")[1].length);
  }
  return scale;
};

const calcNum = (type: string) => {
  if (props.disabled) {
    return;
  }
  const scale = getScale();
  let num = Number(props.modelValue) * scale;
  let step = props.step * scale;
  if (type === "reduce") {
    num -= step;
  } else if (type === "plus") {
    num += step;
  }
  let value = num / scale;
  if (type === "plus" && value < props.min) {
    value = props.min;
  } else if (type === "reduce" && value > props.max) {
    value = props.max;
  }
  if (props.min != -1 && (value < props.min || value > props.max)) {
    if (props.tips != "") {
      $utils.errMsg(props.tips);
    }
    return;
  }
  handleChange(value, type);
};
const plus = () => {
  calcNum("plus");
};
const reduce = () => {
  calcNum("reduce");
};
const blur = (e: any) => {
  let value = e.detail.value;
  if (value) {
    value = +value;
    if (value > props.max) {
      value = props.max;
    } else if (value < props.min) {
      value = props.min;
    }
  } else {
    value = props.min;
  }
  if (value == props.modelValue && value != inputValue.value) {
    inputValue.value = value;
  }
  handleChange(value, "blur");
};

const handleChange = (value: string | number, type: string) => {
  if (props.disabled) {
    return;
  }
  emit("change", {
    value: value,
    type: type,
    index: props.index,
    custom: props.custom,
    params: props.params,
  });
  emit("update:modelValue", value);
};

onMounted(() => {
  diyTheme.value = configStore.getDiyTheme;
});
</script>


<style scoped>
@font-face {
  font-family: "numberbox";
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAASQAA0AAAAABtwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEdAAAABoAAAAciBpnRUdERUYAAARUAAAAHgAAAB4AKQALT1MvMgAAAZwAAABDAAAAVjxzSINjbWFwAAAB9AAAAEYAAAFK5zLpOGdhc3AAAARMAAAACAAAAAj//wADZ2x5ZgAAAkgAAACHAAAAnIfIEjxoZWFkAAABMAAAAC8AAAA2FZWEOWhoZWEAAAFgAAAAHAAAACQH3gOFaG10eAAAAeAAAAARAAAAEgwAAAFsb2NhAAACPAAAAAwAAAAMADAATm1heHAAAAF8AAAAHwAAACABEAAobmFtZQAAAtAAAAFJAAACiCnmEVVwb3N0AAAEHAAAAC0AAABV/+8iFXjaY2BkYGAA4gVmC5Tj+W2+MnCzMIDATWsFOQT9v5GFgbkeyOVgYAKJAgDrogf+AHjaY2BkYGBu+N/AEMPCAAJAkpEBFbAAAEcKAm142mNgZGBgYGWQYQDRDAxMQMwFhAwM/8F8BgALpAE5AHjaY2BkYWCcwMDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMDs9Yn01kbvjfwBDD3MDQABRmBMkBAOXpDHEAeNpjYYAAFghmZGAAAACdAA4AAAB42mNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZiesT6b+P8/AwOElvwnWQxVDwSMbAxwDiMTkGBiQAWMDMMeAABRZwszAAAAAAAAAAAAAAAwAE542iWKQQrCMBBF5xNpd0pQ7EIoTEnahSCTUNqdWz2A9TrieXKeXCc1qcPn/zfzh0BYv2pVH7oQgbvqdG5Yt/DTrNlPYz+wHvuuqhFSME4sFshTgKUsKfhH5lg8BSul3i5bS3mQdd0RIh2IjnvUrkXDd8zuhuFt86tY9fonIsSYgsXpB+cCGosAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMwiWZmJQJRXVQoigTgjMd9QGIsgAFDsEBsAAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwAEAAEABAAAAAIAAAAAeNpjYGBgZACCq0vUOUD0TWsFORgNADPBBE4AAA==)
    format("woff");
  font-weight: normal;
  font-style: normal;
}

.numbox-icon {
  font-family: "numberbox" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-reduce:before {
  content: "\e691";
}

.icon-plus:before {
  content: "\e605";
}

.numberbox {
  display: -webkit-inline-flex;
  display: inline-flex;
  align-items: center;
  background: #f2f2f2;
  border-radius: 100rpx;
  padding: 2rpx 5rpx;
}
.numberbox-btn {
  border-radius: 1000rpx;
  color: #fff;
  text-align: center;
  background: #f2f2f2;
}
.numberbox-btn-reduce {
  background: rgba(0, 0, 0, 0.1);
  color: #f2f2f2;
}

.num-input {
  text-align: center;
  margin: 0 15rpx;
  font-weight: bold;
}

.disabled {
  color: #ededed !important;
  background: #fff !important;
  border: 0 !important;
  min-height: 30rpx;
}
</style>